<template>
<div style="width: 1200px;margin: 0 auto">


<!-- 内容列表开始 -->
  <el-row :gutter="20">
   <el-col :span="6" style="margin-top: 10px" v-for="item in arr">
     <el-card>
       <router-link  :to="'/detail?id='+item.id"
                     style="text-decoration: none;color: #333">
         <img :src="BASE_URL+item.imgUrl" style="width: 100%;height: 150px">
         <p style="height: 40px">{{item.title}}</p>
       </router-link>
       <el-row :gutter="10">
        <el-col :span="4">
          <el-avatar :size="30" :src="BASE_URL+item.userImgUrl"></el-avatar>
        </el-col>
        <el-col :span="16"><span style="font-size: 20px">{{item.nickname}}</span></el-col>
        <el-col :span="4">
          <span style="font-size: 16px;color: #666">{{item.categoryName}}</span>
        </el-col>
       </el-row>
     </el-card>
   </el-col>
  </el-row>
  <div style="text-align: center"><el-button>点击加载更多</el-button></div>
<!-- 内容列表结束 -->


</div>
</template>

<script setup>

import {onBeforeUpdate, onMounted, ref} from "vue";
import axios from "axios";

const arr = ref([]);
//从其它页面进入当前页面时会执行,从当前页面进入当前页面时不执行
onMounted(()=>{
  loadContents();
})
//从其它页面进入当前页面时不执行,从当前页面进入当前页面时执行
onBeforeUpdate(()=>{
  loadContents();
})
const  loadContents=()=>{
  if (location.search.includes('wd')){//搜索
    let wd = new URLSearchParams(location.search).get('wd');
    //发出搜索请求
    axios.get(BASE_URL+'/v1/contents/'+wd+'/search').then((response)=>{
      if (response.data.code==2001){
        arr.value = response.data.data;
      }
    })
  }else{//查看某个类型的内容
    //得到地址栏中的type
    let type = new URLSearchParams(location.search).get('type');
    //请求当前类型下的内容
    axios.get(BASE_URL+'/v1/contents/'+type+'/list').then((response)=>{
      if (response.data.code==2001){
        arr.value = response.data.data;
      }
    })
  }

}
</script>

<style scoped>

</style>